<template>
  <div class="chat-home-box">
    <div class="chat-box">
      <div class="icon-inside">
        <div class="Icon">
          <el-avatar :size="70" :src="OnlineUser.IconUrl" shape="square"></el-avatar>
        </div>
        <div class="user-name">
          <span>{{ OnlineUser.Tick }}</span>
        </div>
        <div class="aside-middle">
          <el-space :size="25" direction="vertical">
            <el-badge v-if="store.state.addTotal!==0" :max="99" :value="store.state.addTotal">
              <div class="add-user" @click="open_add_box">
                <svg class="icon" height="23" p-id="3628" t="1679486520729"
                     version="1.1"
                     viewBox="0 0 1024 1024" width="23" xmlns="http://www.w3.org/2000/svg">
                  <path d="M976 859.712h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 0 64z" p-id="3629"></path>
                  <path
                      d="M848 987.584a32 32 0 0 1-32-32v-255.808a32 32 0 0 1 64 0v255.808a32 32 0 0 1-32 32zM514.304 581.632c-160.96 0-291.84-130.496-291.84-290.816S353.344 0 514.304 0c160.896 0 291.84 130.496 291.84 290.816s-130.944 290.816-291.84 290.816z m0-517.632c-125.632 0-227.84 101.76-227.84 226.816s102.208 226.816 227.84 226.816 227.84-101.76 227.84-226.816S639.936 64 514.304 64z"
                      p-id="3630"></path>
                  <path
                      d="M761.024 615.616a31.168 31.168 0 0 1-17.344-5.12 422.592 422.592 0 0 0-101.888-48.064 32 32 0 1 1 19.328-60.992c41.216 13.056 80.64 31.68 117.248 55.296a32 32 0 0 1-17.344 58.88zM48 1024a32 32 0 0 1-32-32c0-226.816 141.248-424 351.488-490.624a32 32 0 1 1 19.328 61.056C203.328 620.544 80 793.216 80 992a32 32 0 0 1-32 32z"
                      p-id="3631"></path>
                </svg>
              </div>
            </el-badge>
            <div v-else class="add-user" @click="open_add_box">
              <svg class="icon" height="23" p-id="3628" t="1679486520729"
                   version="1.1"
                   viewBox="0 0 1024 1024" width="23" xmlns="http://www.w3.org/2000/svg">
                <path d="M976 859.712h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 0 64z" p-id="3629"></path>
                <path
                    d="M848 987.584a32 32 0 0 1-32-32v-255.808a32 32 0 0 1 64 0v255.808a32 32 0 0 1-32 32zM514.304 581.632c-160.96 0-291.84-130.496-291.84-290.816S353.344 0 514.304 0c160.896 0 291.84 130.496 291.84 290.816s-130.944 290.816-291.84 290.816z m0-517.632c-125.632 0-227.84 101.76-227.84 226.816s102.208 226.816 227.84 226.816 227.84-101.76 227.84-226.816S639.936 64 514.304 64z"
                    p-id="3630"></path>
                <path
                    d="M761.024 615.616a31.168 31.168 0 0 1-17.344-5.12 422.592 422.592 0 0 0-101.888-48.064 32 32 0 1 1 19.328-60.992c41.216 13.056 80.64 31.68 117.248 55.296a32 32 0 0 1-17.344 58.88zM48 1024a32 32 0 0 1-32-32c0-226.816 141.248-424 351.488-490.624a32 32 0 1 1 19.328 61.056C203.328 620.544 80 793.216 80 992a32 32 0 0 1-32 32z"
                    p-id="3631"></path>
              </svg>
            </div>
            <el-drawer v-model="add_open" destroy-on-close>
              <template #title>
                <span style="font-size: 16px;font-weight: bold;color: #8f9194">添加你的好友吧</span>
              </template>
              <div class="search_friend_box">
                <div style="text-align: center;">
                  <el-input v-model="friend_name" placeholder='这里可以搜索,如输入:"是阿龙呀"(需加英文双引号)'
                            prefix-icon="Search"
                            size="large" style="width: 350px"/>
                  <el-button size="large" style="margin-left: 10px" type="primary" @click="search">搜索</el-button>
                </div>
                <div
                    style="margin-top: 15px;height: 350px;overflow: auto">
                  <el-scrollbar>
                    <div v-if="friend_list.list.length!==0">
                      <div v-for="(item,index) in friend_list.list" :key="index" style="width: 450px;margin-left:50px">
                        <div>
                          <el-card style="margin-top: 10px;width: 400px">
                            <el-space :size="15">
                              <div>
                                <el-avatar :size="50" :src="item.image"/>
                              </div>
                              <div>
                                <span style="font-size: 18px">{{ item.tick }}</span>
                              </div>
                              <div style="margin-left: 50px">
                                <el-button :icon="Plus" color="#626aef" size="default"
                                           style="font-size: 15px;color: #ffffff" @click="addF(item)"/>
                              </div>
                            </el-space>
                          </el-card>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                    <span>
                      <svg height="300px" version="1.1" viewBox="0 0 1024 1024"
                           width="300px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>搜索无结果</title>
    <defs>
        <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="100%" y2="0%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="13%" stop-color="#FBFDFF" stop-opacity="0.19"></stop>
            <stop offset="41%" stop-color="#F1F7FF" stop-opacity="0.43"></stop>
            <stop offset="81%" stop-color="#E1EEFF" stop-opacity="0.82"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-2" x1="13.79541%" x2="75.9615159%" y1="17.4909936%" y2="89.9646933%">
            <stop offset="0%" stop-color="#ACD4FE"></stop>
            <stop offset="100%" stop-color="#3798FC"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-3" x1="50%" x2="50%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#184285"></stop>
            <stop offset="100%" stop-color="#365D9C"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-4" x1="50%" x2="54.7394821%" y1="0%" y2="57.3774008%">
            <stop offset="0%" stop-color="#69C0FF"></stop>
            <stop offset="100%" stop-color="#48ADFF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="100.122278%" y2="-0.0579832828%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-6" x1="50.0843871%" x2="50.0843871%" y1="100%" y2="0.00649473815%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="14%" stop-color="#F8FBFF" stop-opacity="0.27"></stop>
            <stop offset="37%" stop-color="#EDF5FF" stop-opacity="0.52"></stop>
            <stop offset="58%" stop-color="#E4F0FF" stop-opacity="0.73"></stop>
            <stop offset="76%" stop-color="#DEECFF" stop-opacity="0.88"></stop>
            <stop offset="91%" stop-color="#DAEAFF" stop-opacity="0.97"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-7" x1="50.0045895%" x2="50.0045895%" y1="99.9311993%" y2="-0.0811277354%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="9%" stop-color="#FEFEFF" stop-opacity="0.13"></stop>
            <stop offset="23%" stop-color="#FBFCFF" stop-opacity="0.21"></stop>
            <stop offset="40%" stop-color="#F5F9FF" stop-opacity="0.33"></stop>
            <stop offset="59%" stop-color="#EEF5FF" stop-opacity="0.51"></stop>
            <stop offset="79%" stop-color="#E4EFFF" stop-opacity="0.74"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-8" x1="50%" x2="50%" y1="0%" y2="100%">
            <stop offset="0%" stop-color="#3E9DFC"></stop>
            <stop offset="100%" stop-color="#0478ED"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-9" x1="50%" x2="50%" y1="0%" y2="72.8953236%">
            <stop offset="0%" stop-color="#9AD6FF"></stop>
            <stop offset="100%" stop-color="#3597FB"></stop>
        </linearGradient>
    </defs>
    <g id="搜索无结果" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
        <rect fill="#FFFFFF" height="1024" width="1024" x="0" y="0"></rect>
        <rect id="矩形" fill="#F4F7F9" fill-rule="nonzero" height="1024" opacity="0" width="1024" x="0" y="0"></rect>
        <polygon id="路径" fill="#E4EFFF" fill-rule="nonzero" points="100.338645 606 106 667 71 662.931464"></polygon>
        <polygon id="路径" fill="#E4EFFF" fill-rule="nonzero" points="148.480744 564 158 665 94 658.708564"></polygon>
        <ellipse id="椭圆形" cx="512" cy="742" fill="url(#linearGradient-1)" fill-rule="nonzero" rx="512"
                 ry="162"></ellipse>
        <g id="暂无搜索条件" fill-rule="nonzero" transform="translate(345.741487, 283.911682)">
            <circle id="Oval" cx="183.729086" cy="183.729086"
                    fill="#E6F3FF"
                    r="129.916083"
                    transform="translate(183.729086, 183.729086) rotate(-45.000000) translate(-183.729086, -183.729086)"></circle>
            <path id="Shape"
                  d="M196.713351,65.0899994 C244.611367,65.0718044 287.803192,93.8096252 306.145629,137.901128 C324.488065,181.99263 314.368234,232.753187 280.50568,266.509799 C246.643126,300.266411 195.7077,310.370096 151.453952,292.10884 C107.200204,273.847584 78.3447161,230.818274 78.3447161,183.088318 C78.4193789,117.950493 131.39133,65.1644088 196.758513,65.0899994 L196.713351,65.0899994 Z M196.758513,41.0883178 C118.057936,41.0883178 54.2585129,104.663883 54.2585129,183.088318 C54.2585129,261.512752 118.057936,325.088318 196.758513,325.088318 C275.45909,325.088318 339.258513,261.512752 339.258513,183.088318 C339.258513,104.663883 275.45909,41.0883178 196.758513,41.0883178 Z"
                  fill="#0478ED"></path>
            <path id="Path"
                  d="M360.665808,377.088318 C358.623727,377.104718 356.659796,376.304076 355.211502,374.86449 L272.495373,292.141559 C269.512893,289.117227 269.512893,284.258363 272.495373,281.234031 L273.411937,280.317558 C276.434762,277.345238 281.282698,277.345238 284.305523,280.317558 L367.021653,363.025465 C370.004133,366.049798 370.004133,370.908661 367.021653,373.932993 L366.120114,374.849466 C364.674293,376.294558 362.710056,377.100735 360.665808,377.088318 Z"
                  fill="#F7F8F8"></path>
            <path id="Path"
                  d="M279.254448,268.088318 C274.469651,268.084568 269.878831,269.980065 266.4896,273.358799 L265.571373,274.277364 C262.170242,277.667959 260.258513,282.273676 260.258513,287.077047 C260.258513,291.880417 262.170242,296.486134 265.571373,299.876729 L348.437518,382.773494 C351.82686,386.175882 356.430875,388.088318 361.232472,388.088318 C366.034069,388.088318 370.638084,386.175882 374.027426,382.773494 L374.945652,381.854929 C378.346783,378.464334 380.258513,373.858617 380.258513,369.055246 C380.258513,364.251875 378.346783,359.646158 374.945652,356.255564 L292.034349,273.358799 C288.641427,269.976375 284.044459,268.080576 279.254448,268.088318 L279.254448,268.088318 Z"
                  fill="#63A6F9"></path>
            <ellipse id="Oval" cx="190.758513" cy="183.588318" fill="#D2E8FF" rx="130.5" ry="129.5"></ellipse>
            <path id="Shape"
                  d="M190.713351,63.0899994 C238.611367,63.0718044 281.803192,91.8096252 300.145629,135.901128 C318.488065,179.99263 308.368234,230.753187 274.50568,264.509799 C240.643126,298.266411 189.7077,308.370096 145.453952,290.10884 C101.200204,271.847584 72.3447161,228.818274 72.3447161,181.088318 C72.4193789,115.950493 125.39133,63.1644088 190.758513,63.0899994 L190.713351,63.0899994 Z M190.758513,39.0883178 C112.057936,39.0883178 48.2585129,102.663883 48.2585129,181.088318 C48.2585129,259.512752 112.057936,323.088318 190.758513,323.088318 C269.45909,323.088318 333.258513,259.512752 333.258513,181.088318 C333.258513,102.663883 269.45909,39.0883178 190.758513,39.0883178 Z"
                  fill="url(#linearGradient-2)"></path>
            <path id="Path"
                  d="M368.637868,377.088318 C366.594644,377.098432 364.631699,376.291841 363.185425,374.846971 L280.482539,292.145591 C277.517171,289.112159 277.517171,284.262441 280.482539,281.229009 L281.39879,280.326812 C284.422389,277.342153 289.280075,277.342153 292.303675,280.326812 L374.99154,363.103375 C376.442642,364.548329 377.258513,366.512737 377.258513,368.561666 C377.258513,370.610595 376.442642,372.575003 374.99154,374.019957 L374.09031,374.922154 C372.631782,376.339505 370.670335,377.118434 368.637868,377.088318 Z"
                  fill="#F7F8F8"></path>
            <path id="Path"
                  d="M287.254448,268.088318 C282.469651,268.084568 277.878831,269.980065 274.4896,273.358799 L273.571373,274.277364 C270.170242,277.667959 268.258513,282.273676 268.258513,287.077047 C268.258513,291.880417 270.170242,296.486134 273.571373,299.876729 L356.437518,382.773494 C359.82686,386.175882 364.430875,388.088318 369.232472,388.088318 C374.034069,388.088318 378.638084,386.175882 382.027426,382.773494 L382.945652,381.854929 C386.346783,378.464334 388.258513,373.858617 388.258513,369.055246 C388.258513,364.251875 386.346783,359.646158 382.945652,356.255564 L300.034349,273.358799 C296.641427,269.976375 292.044459,268.080576 287.254448,268.088318 Z"
                  fill="#3597FB"></path>
        </g>
        <path id="椭圆形"
              d="M519.64631,677 C521.855449,677 522.5,674.611601 522.5,672.954746 C522.5,671.297892 518.709139,670.337399 516.5,670.337399 C514.290861,670.337399 512,672.343146 512,674 C512,675.656854 517.437171,677 519.64631,677 Z"
              fill="#003A8C"></path>
        <path id="椭圆形"
              d="M534.64631,675 C536.855449,675 537.5,672.611601 537.5,670.954746 C537.5,669.297892 533.709139,668.337399 531.5,668.337399 C529.290861,668.337399 527,670.343146 527,672 C527,673.656854 532.437171,675 534.64631,675 Z"
              fill="#003A8C"></path>
        <g id="图片加载失败" transform="translate(460.000000, 606.000000)">
            <path id="Path"
                  d="M66.6876434,27 C64.6004391,26.7776047 62.4301989,26.7776047 60.3429946,27 C60.4537938,26.0235336 60.3475184,24.9213726 60,24 C61.084844,24.5909453 62.2996684,24.914362 63.54,24.9424366 C64.7438242,24.8902856 65.9228693,24.5892085 67,24.0589023 C66.7715355,24.9849525 66.6984076,26.0472351 66.6876434,27 Z"
                  fill="#FACEBB"
                  fill-rule="nonzero"></path>
            <path id="椭圆形"
                  d="M60,112 C61.9329966,112 62.5,110.106588 62.5,108.449734 C62.5,106.79288 56.9329966,104.899468 55,104.899468 C53.0670034,104.899468 52,107.566904 52,109.223758 C52,110.880612 58.0670034,112 60,112 Z"
                  fill="#003A8C"></path>
            <path id="椭圆形"
                  d="M74.0354749,110.416302 C75.9684715,110.416302 76.5354749,108.52289 76.5354749,106.866036 C76.5354749,105.209182 70.9684715,103.31577 69.0354749,103.31577 C67.1024783,103.31577 66.0354749,105.983206 66.0354749,107.64006 C66.0354749,109.296915 72.1024783,110.416302 74.0354749,110.416302 Z"
                  fill="#003A8C"
                  transform="translate(71.285475, 106.866036) rotate(-35.000000) translate(-71.285475, -106.866036)"></path>
            <path id="Path"
                  d="M82.0560881,96.7761209 C81.6263659,96.7761209 71.7018299,97.9045755 61.9205346,98.048197 C53.6330355,98.048197 45.4478512,97.3095722 43.1969255,97.2275027 C50.6454432,100.838558 56.477387,103.977713 56.477387,103.977713 C56.477387,103.977713 54.922202,107.958081 53.5307207,111.30241 C53.4284059,111.528101 53.3260911,111.774309 53.2442392,112 C48.1898879,110.974132 -3.82695849,105.229272 0.224707749,85.6146785 C1.71850389,78.9670548 8.81915129,79.8903358 22.9385943,79.1106763 C30.8372971,78.6592944 38.9406296,78.1873952 43.954055,77.7975654 C44.3633142,78.8439506 46.9416473,79.5693089 50.4612766,80.6567289 C51.6890542,84.2677838 58.2671771,84.8153438 58.3899549,85 L50.4612766,89.205216 C49.7450729,89.5334938 49.020463,89.2864863 49,89.6557987 C50.0204772,91.2396315 51.8216112,92.7667932 53.2442392,94 C53.9362893,94.3177446 54.4618918,93.8279318 55,93.2881701 C55.6752777,93.6164479 57.0565371,93.4862823 57.0565371,92.6450706 C57.5271852,92.8707615 58.7505366,91.6244101 59.0557201,91.441608 C59.3609036,91.2588059 60.5788131,91.7941313 60.6313681,91.441608 L60.0584052,89.71815 C60.5057596,90.02102 60.9298483,90.3570778 61.3271087,90.7235005 C61.9205346,91.3185038 62.6112037,90.6808079 63,90.0242525 C63.3683333,90.5987385 63.9463677,91.2364344 64.5397936,90.7235005 C64.9421111,90.3544758 65.3732063,90.0182882 65.8289601,89.71815 C65.5424787,90.4978096 65.3173861,91.1748823 65.2355343,91.441608 C65.2936519,91.7955633 66.7212995,91.5618926 67.0583556,91.441608 C67.0583556,92.3443717 68.5907408,92.6110974 69,92.3854064 C69.1432407,93.2266181 70.9242374,93.6164479 71.5176632,93.2881701 C72.0557714,93.8279318 72.2784834,94.3177446 72.9705335,94 C74.3996185,92.7674341 75.6466927,91.8361251 76.6743294,90.2516013 C76.6743294,89.8822888 76.1627553,89.5334938 75.4260888,89.205216 L72.9705335,87 L75.2788505,80.6567289 C78.7984797,79.5693089 81.6672918,78.1258431 82.0560881,77.0794579 C87.1309023,77.4077356 97.1577531,76.6485934 105.056456,77.0794579 C119.175899,77.8796348 126.276546,76.9563537 127.770343,83.6039775 C131.862935,103.198054 79.9688661,107.527216 74.750811,109.866195 C74.6280333,109.414813 74.4847926,108.942914 74.3210889,108.471015 C73.5201058,106.247588 72.5838731,104.07551 71.5176632,101.967012 C71.5176632,101.967012 76.2241442,99.6895856 82.0560881,96.7761209 Z"
                  fill="url(#linearGradient-3)"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M67.737527,84.9882182 L68.4361782,82.1758294 C66.5219941,82.4310797 64.593187,82.5613692 62.6620314,82.5658687 C60.7516072,82.554416 58.8437497,82.4241509 56.9495303,82.1758294 L57.6481815,84.9676898 L57.6481815,85.2756156 L51.9562289,87 C51.8534861,86.7536594 51.0109949,84.2697247 49.778081,80.6567289 C48.3191329,76.3252395 42.578955,70.3925361 40.6473899,64.583003 C37.6472994,55.6326269 34.6954342,38.6556521 36.6064507,34.8784292 C37.3667477,33.1745732 40.0586097,32.1070971 43.2847344,31.409132 C43.8600943,31.2859617 51.9356804,29.5410489 54.9357709,28.9662541 C57.9358614,28.3914593 57.2577588,28.4941013 57.2577588,26.6465466 C57.929027,26.4347272 58.6161666,26.2768403 59.3126153,26.1743937 C61.457068,25.9418688 63.6204121,25.9418688 65.7648648,26.1743937 C66.4603458,26.2912035 67.146929,26.4558216 67.8197213,26.667075 C67.8197213,28.535158 67.1416186,28.4119877 70.1417092,28.9867825 C73.1417997,29.5615773 81.2173858,31.3064901 81.7927456,31.4296604 C85.0188704,32.1276255 87.6696353,33.1745732 88.4299322,34.8784292 C90.2966225,38.5287879 87.2435525,55.5042795 84.1188432,64.583003 C84.0102473,64.8985242 76.7377986,76.3252395 75.2788505,80.6567289 L73.2239939,87 L67.5320414,85.2756156 L67.737527,84.9882182 Z"
                  fill="url(#linearGradient-4)"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M81.9390754,77.1135478 C81.5421468,78.1301035 78.5932484,79.9435794 75,81 L75.1912891,80.5020668 C76.6745487,76.2963168 80.4081014,69.3546759 84,65 C84,66.5547322 81.1452182,76.6152362 81.9390754,77.1135478 Z"
                  fill="#48ADFF"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M68.7671958,92.6450706 C68.2804233,92.8672462 66.6507937,92.6450706 66.6507937,91.7563682 C66.30219,91.8747793 65.9165104,91.8395392 65.5977826,91.6601531 C65.2790547,91.480767 65.0601087,91.1757123 65,90.8272701 C65,90.564699 65.3174603,89.8981721 65.6137566,89.1306564 C65.9341849,88.0199979 66.4340082,86.9637748 67.0952381,86 C69.0588833,86.4157228 70.9895488,86.9624049 72.8730159,87.6360204 C73.9312169,87.9793827 74.989418,88.3025473 75.7089947,88.6257118 L75.7089947,88.6257118 C76.4708995,88.9488763 76.957672,89.2922386 77,89.6557987 C75.9371565,91.2156424 74.6473576,92.6233721 73.1693122,93.8367398 C72.4535525,94.1495353 71.6094538,94.0045342 71.0529101,93.4731797 C70.2698413,93.7559487 68.9153439,93.4327841 68.7671958,92.6450706 Z"
                  fill="#FACEBB"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M73.9292155,87.2247144 L76,88.8718588 C75.2545176,88.529595 74.260541,88.1873313 73.2251488,87.823676 C71.3822786,87.1102494 69.534643,86.574041 67.6133229,86.1337487 C66.9663453,87.1544832 66.4808889,88.3312976 66.1673673,89.5075967 C65.7061594,89.8205221 65.2248959,90.070082 64.8177638,90.4548287 C64.2172363,91.0751818 63.3727412,91.2408813 63,90.5563538 C63.0935304,90.3969029 63.2831093,90.1195205 63.3268518,89.9386398 C63.3365518,89.6991625 63.1800176,89.668629 63.1714902,89.4066459 C64.6725052,87.7555718 66.4095202,86.1886328 68.2759739,85 L68.2759739,85.2994808 L74.0120469,87.0963655 L73.9292155,87.2247144 Z"
                  fill="#FACEBB"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M71.9767849,14.1355879 C72.0077384,14.5843551 72.0077384,15.0346383 71.9767849,15.4834055 C71.9767849,15.704689 71.9767849,15.9259725 71.9767849,16.147256 C71.9451789,16.5933554 71.8830521,17.0369064 71.7908182,17.474957 C71.262973,20.3804237 69.3551565,22.8718457 66.6457383,24.1939286 C64.3686938,25.2686905 61.7114059,25.2686905 59.4343614,24.1939286 C56.7591228,22.8655744 54.8777448,20.3936077 54.3512705,17.5151904 C54.2644878,17.0701398 54.2092562,16.6198041 54.1859667,16.1673727 C54.1859667,15.9662059 54.1859667,15.7449224 54.1859667,15.5236389 C54.0934514,14.9639537 54.0313759,14.3999003 54,13.8338376 C54,13.3912706 54,11.3393691 54.1859667,10.9169188 C54.1859667,11.2790191 54.723204,12.48602 55.0744745,11.5606526 C55.0744745,11.5606526 56.4382306,8.2212835 57.8433126,8 C58.5976609,8.66984891 59.4933005,9.17105457 60.46751,9.46851775 C61.7638052,9.49474946 63.0535891,9.28319394 64.2694967,8.84490062 C65.6312159,9.17494848 67.0109267,9.43016291 68.4020909,9.60933452 C70.0242642,10.0424181 71.294612,11.271546 71.7494922,12.8481202 C71.8549602,13.2718013 71.9308974,13.7019372 71.9767849,14.1355879 Z"
                  fill="#FACEBB"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M69,82 L68.2701252,85.2522255 C66.3352554,86.5712925 64.5667692,88.1677458 63.0107335,90 C61.4433612,88.1717184 59.6682848,86.5758297 57.7298748,85.2522255 L57,82.0237389 C58.9788744,82.310896 60.9719963,82.4615336 62.9677996,82.4747774 C64.9857287,82.4617055 67.0007386,82.3031098 69,82 Z"
                  fill="#1F488A"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M63,90.0242525 C63,90.2243333 62.8759415,90.402183 62.7932709,90.5578014 C62.4005857,91.1802752 61.7598887,91.1135816 61.1605271,90.5578014 C60.759293,90.1607709 60.3309623,89.7966416 59.8791332,89.4684724 C59.5566353,88.2497448 59.0691689,87.0886961 58.4323983,86.0226355 C56.5077254,86.4788485 54.6153808,87.0805856 52.7694641,87.8233631 C51.736082,88.2012936 50.7026999,88.5569929 50,88.9126922 L52.0667643,87.2008894 L57.7917013,85.3334681 L57.7917013,85 C59.6579399,86.2395415 61.3669261,87.7340745 62.8759415,89.4462411 C62.9592105,89.6256442 63.0017103,89.8237422 63,90.0242525 L63,90.0242525 Z"
                  fill="#FACEBB"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M59.1766784,91.7563682 C59.1766784,92.6450706 57.4805654,92.8672462 57.0565371,92.6450706 C56.9081272,93.4731797 55.5512367,93.7963442 54.9363958,93.4731797 C54.3788687,94.0045342 53.5332787,94.1495353 52.8162544,93.8367398 C51.3422876,92.6227412 50.0573034,91.2149621 49,89.6557987 C49,89.2922386 49.5300353,88.9488763 50.2720848,88.6257118 L50.2720848,88.6257118 C51.0353357,88.3025473 52.0530035,87.9793827 53.1130742,87.6360204 C55.0066642,86.9611825 56.9478813,86.4144846 58.9222615,86 C59.5754776,86.9685512 60.0755336,88.0234022 60.4063604,89.1306564 L61,90.8272701 C60.9662027,91.224263 60.7229881,91.577699 60.3543247,91.7655563 C59.9856614,91.9534137 59.5420626,91.9499527 59.1766784,91.7563682 Z"
                  fill="#FACEBB"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M41.0000951,66 C46.0214832,73.180161 49.0214514,78.180161 50,81 C46.4441475,79.9375488 43.9633202,78.6144964 43.5498489,77.5921376 C44.3354443,77.1310739 40.9794216,67.5636074 41.0000951,66 Z"
                  fill="#48ADFF"
                  fill-rule="nonzero"></path>
            <path id="Path"
                  d="M71.4067615,12.3999373 C71.4067615,14.322698 71.0676599,15.8772706 70.5091396,16 C70.8319768,14.1673733 70.580595,12.2769818 69.7910421,10.5999059 L69.4918348,11.5203765 C68.733843,10.0271687 65.2430913,8.88169416 64.6047824,8.61578043 C65.0172178,9.29404326 65.345555,10.0224038 65.5821929,10.784 C63.882585,9.97319498 62.1040187,9.34924999 60.2762503,8.92260396 C60.3427623,9.60582431 60.6644121,10.2361801 61.1738721,10.6817255 C58.8600024,10.2317177 57.7429618,9.02487847 57.7429618,8.73850984 C56.0075596,10.2930824 56.4862912,11.0294588 56.0474539,12.7067608 C55.8479823,11.9499294 55.7083523,11.2749177 55.7083523,11.2749177 C55.4074759,12.82984 55.3201925,14.4202785 55.4490393,16 C54.803903,14.9046687 54.264815,13.6780704 54.3248127,12.3999373 C54.1452883,12.031749 51.7189217,6.99984319 53.9131085,4.13615693 C55.9078238,1.6611138 58.9996325,-1.07984305 62.3108598,0.433819691 C65.7985154,-0.669284546 69.592833,0.427533186 72.0051761,3.23614124 C74.1195743,5.28163143 72.3068471,9.67943533 71.648591,12.3999373 C71.0146738,12.0396944 72.0960032,12.1701598 71.4067615,12.3999373 Z"
                  fill="#003A8C"
                  fill-rule="nonzero"></path>
        </g>
        <polygon id="路径" fill="#F3F8FF" fill-rule="nonzero" points="904.847021 606 935 662.390418 900 670"></polygon>
        <path id="路径"
              d="M167.226695,342.026586 C163.492711,322.014575 146.009937,307.640823 125.848517,308.006834 C115.061593,307.956383 104.650299,312.004239 96.6816737,319.346752 C92.2164177,317.314169 87.3751145,316.260961 82.4772245,316.256625 C66.9584474,316.009657 53.3722107,326.731143 49.8575212,341.998237 C37.9307461,344.661244 29.3304481,355.181909 29,367.513052 C29.4585952,382.518847 41.8172108,394.341524 56.6790254,393.99176 L160.320975,393.99176 C175.188744,394.357154 187.556538,382.525697 188,367.513052 C187.676143,355.214173 179.115739,344.711538 167.226695,342.026586 L167.226695,342.026586 Z"
              fill="url(#linearGradient-5)"
              fill-rule="nonzero"></path>
        <path id="路径"
              d="M768.714498,203.095574 C763.32672,194.654828 754.21547,189.411837 744.306491,189.05019 C738.536478,180.120349 728.651433,174.817417 718.124893,175.004806 C709.6853,174.919628 701.567448,178.284389 695.603086,184.339848 C692.872347,183.456175 690.023822,183.003641 687.157409,182.998114 C673.897696,182.998114 662.946468,192.304609 661.820379,204.06619 C651.712515,206.509187 644.434781,215.463021 644,225.990693 C644,238.665795 655.457969,249 669.337032,249 L766.659384,249 C780.735511,249 791.996416,238.665795 791.996416,225.990693 C792.221633,213.943636 781.805297,204.037643 768.714498,203.095574 Z"
              fill="url(#linearGradient-6)"
              fill-rule="nonzero"></path>
        <path id="路径"
              d="M949.623905,171.742852 C940.122562,152.167323 920.286816,139.710453 898.509647,139.643039 C886.380486,139.669114 874.582387,143.597854 864.863399,150.847162 C853.298536,128.313014 828.182324,116.167009 803.315887,121.083265 C778.449449,125.999521 759.857514,146.78691 757.756177,172.022955 C731.006664,180.455136 714.408255,207.114064 718.662885,234.81122 C722.917516,262.508377 746.754,282.9685 774.803609,283 L933.053129,283 C961.264971,283.053292 985.245783,262.424685 989.381219,234.545632 C993.516652,206.666579 976.554782,179.976968 949.53979,171.854893 L949.623905,171.742852 Z"
              fill="url(#linearGradient-7)"
              fill-rule="nonzero"></path>
        <path id="？"
              d="M542.283,498.617 L542.283,496.254 C542.283,492.918 542.978,489.86 544.507,487.08 C545.758,484.578 547.704,482.076 550.345,479.852 C556.878,474.153 560.77,470.539 562.021,469.01 C565.496,464.562 567.303,458.863 567.303,452.052 C567.303,443.712 564.523,437.04 558.963,432.175 C553.403,427.171 546.175,424.808 537.279,424.808 C526.993,424.808 518.931,427.727 513.093,433.704 C507.255,439.542 504.336,447.465 504.336,457.612 L518.931,457.612 C518.931,451.496 520.182,446.77 522.684,443.434 C525.464,439.403 530.051,437.457 536.306,437.457 C541.31,437.457 545.341,438.847 548.121,441.627 C550.762,444.407 552.152,448.16 552.152,453.025 C552.152,456.639 550.762,459.975 548.26,463.172 L545.897,465.813 C537.279,473.458 531.997,479.157 530.19,483.049 C528.244,486.663 527.41,491.111 527.41,496.254 L527.41,498.617 L542.283,498.617 Z M534.777,526 C537.557,526 540.059,525.027 542.005,523.22 C543.951,521.274 545.063,518.911 545.063,515.992 C545.063,513.073 544.09,510.71 542.144,508.903 C540.198,506.957 537.696,506.123 534.777,506.123 C531.997,506.123 529.495,506.957 527.549,508.903 C525.603,510.71 524.63,513.073 524.63,515.992 C524.63,518.772 525.603,521.135 527.549,523.081 C529.495,525.027 531.997,526 534.777,526 Z"
              fill="url(#linearGradient-8)"
              fill-rule="nonzero"></path>
        <path id="？"
              d="M536.283,498.617 L536.283,496.254 C536.283,492.918 536.978,489.86 538.507,487.08 C539.758,484.578 541.704,482.076 544.345,479.852 C550.878,474.153 554.77,470.539 556.021,469.01 C559.496,464.562 561.303,458.863 561.303,452.052 C561.303,443.712 558.523,437.04 552.963,432.175 C547.403,427.171 540.175,424.808 531.279,424.808 C520.993,424.808 512.931,427.727 507.093,433.704 C501.255,439.542 498.336,447.465 498.336,457.612 L512.931,457.612 C512.931,451.496 514.182,446.77 516.684,443.434 C519.464,439.403 524.051,437.457 530.306,437.457 C535.31,437.457 539.341,438.847 542.121,441.627 C544.762,444.407 546.152,448.16 546.152,453.025 C546.152,456.639 544.762,459.975 542.26,463.172 L539.897,465.813 C531.279,473.458 525.997,479.157 524.19,483.049 C522.244,486.663 521.41,491.111 521.41,496.254 L521.41,498.617 L536.283,498.617 Z M528.777,526 C531.557,526 534.059,525.027 536.005,523.22 C537.951,521.274 539.063,518.911 539.063,515.992 C539.063,513.073 538.09,510.71 536.144,508.903 C534.198,506.957 531.696,506.123 528.777,506.123 C525.997,506.123 523.495,506.957 521.549,508.903 C519.603,510.71 518.63,513.073 518.63,515.992 C518.63,518.772 519.603,521.135 521.549,523.081 C523.495,525.027 525.997,526 528.777,526 Z"
              fill="url(#linearGradient-9)"
              fill-rule="nonzero"></path>
    </g>
</svg>
                    </span>
                    </div>
                  </el-scrollbar>
                </div>
                <div>
                  <div>
                    <el-divider><span style="font-size: 16px;font-weight: bold;color: #8f9194">好友申请列表</span>
                    </el-divider>
                  </div>
                  <div style="margin-top: 15px;height: 350px;overflow: auto">
                    <el-scrollbar>
                      <div v-if="store.state.addF">
                        <div v-for="(item,index) in store.state.addF" :key="index"
                             style="width: 450px;margin-left:50px">
                          <div>
                            <el-card style="margin-top: 10px;width: 400px">
                              <el-space :size="15">
                                <div>
                                  <el-avatar :size="50" :src="item.fromImage"/>
                                </div>
                                <div>
                                  <span style="font-size: 18px">{{ item.fromTick }}</span>
                                </div>
                                <div style="margin-left: 50px">
                                  <el-button :icon="Check" size="default" style="font-size: 15px;"
                                             type="success" @click="isAdd(item)"/>
                                  <el-button :icon="Close" style="font-size: 15px" type="danger"
                                             @click="isUnAdd(item)"/>
                                </div>
                              </el-space>
                            </el-card>
                          </div>
                        </div>
                      </div>
                      <div v-else>
                      <span>
                        <svg height="300px" version="1.1" viewBox="0 0 1024 1024"
                             width="200px" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>暂无相关信息</title>
    <defs>
        <linearGradient id="linearGradient-1" x1="50%" x2="50%" y1="100.122278%" y2="-0.0579832828%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-2" x1="50.0843871%" x2="50.0843871%" y1="100%" y2="0.00649473815%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="14%" stop-color="#F8FBFF" stop-opacity="0.27"></stop>
            <stop offset="37%" stop-color="#EDF5FF" stop-opacity="0.52"></stop>
            <stop offset="58%" stop-color="#E4F0FF" stop-opacity="0.73"></stop>
            <stop offset="76%" stop-color="#DEECFF" stop-opacity="0.88"></stop>
            <stop offset="91%" stop-color="#DAEAFF" stop-opacity="0.97"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-3" x1="50.0045895%" x2="50.0045895%" y1="99.9311993%" y2="-0.0811277354%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="9%" stop-color="#FEFEFF" stop-opacity="0.13"></stop>
            <stop offset="23%" stop-color="#FBFCFF" stop-opacity="0.21"></stop>
            <stop offset="40%" stop-color="#F5F9FF" stop-opacity="0.33"></stop>
            <stop offset="59%" stop-color="#EEF5FF" stop-opacity="0.51"></stop>
            <stop offset="79%" stop-color="#E4EFFF" stop-opacity="0.74"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-4" x1="50%" x2="50%" y1="100%" y2="0%">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.1"></stop>
            <stop offset="13%" stop-color="#FBFDFF" stop-opacity="0.19"></stop>
            <stop offset="41%" stop-color="#F1F7FF" stop-opacity="0.43"></stop>
            <stop offset="81%" stop-color="#E1EEFF" stop-opacity="0.82"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-5" x1="50%" x2="50%" y1="100%" y2="0%">
            <stop offset="0%" stop-color="#FFFFFF"></stop>
            <stop offset="100%" stop-color="#D9E9FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-6" x1="0%" x2="100%" y1="50.0060613%" y2="50.0060613%">
            <stop offset="0%" stop-color="#E0E7FF"></stop>
            <stop offset="33%" stop-color="#CCDFFB"></stop>
            <stop offset="71%" stop-color="#BBD9F7"></stop>
            <stop offset="100%" stop-color="#B5D7F6"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-7" x1="0%" x2="100%" y1="50%" y2="50%">
            <stop offset="0%" stop-color="#EEF6FF"></stop>
            <stop offset="100%" stop-color="#D2E6FE"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-8" x1="-1198.12563%" x2="-1298.12563%" y1="-1361.69233%" y2="-1361.69233%">
            <stop offset="0%" stop-color="#ECF5FF"></stop>
            <stop offset="24.839494%" stop-color="#F9FCFF"></stop>
            <stop offset="45%" stop-color="#DAEAFF"></stop>
            <stop offset="74.7030722%" stop-color="#C7DFFF"></stop>
            <stop offset="100%" stop-color="#C0DBFF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-9" x1="100%" x2="-14.8903051%" y1="50%" y2="50%">
            <stop offset="0%" stop-color="#FFFFFF"></stop>
            <stop offset="6%" stop-color="#F9FCFF"></stop>
            <stop offset="67.4804304%" stop-color="#DAEAFF"></stop>
            <stop offset="84.9696706%" stop-color="#C7DFFF"></stop>
            <stop offset="100%" stop-color="#C0DBFF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-10" x1="28.6970471%" x2="106.883829%" y1="56.9855846%" y2="45.8848302%">
            <stop offset="0%" stop-color="#D7E8FF"></stop>
            <stop offset="100%" stop-color="#EAF3FF"></stop>
        </linearGradient>
        <linearGradient id="linearGradient-11" x1="-1416.74401%" x2="-1316.74401%" y1="-4054.70568%" y2="-4054.70568%">
            <stop offset="0%" stop-color="#CBE2FC"></stop>
            <stop offset="4%" stop-color="#FCFDFF"></stop>
            <stop offset="35%" stop-color="#E9F3FF"></stop>
            <stop offset="66%" stop-color="#DEECFF"></stop>
            <stop offset="100%" stop-color="#DAEAFF"></stop>
        </linearGradient>
    </defs>
    <g id="暂无相关信息" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
        <rect fill="#FFFFFF" height="1024" width="1024" x="0" y="0"></rect>
        <g id="编组" fill-rule="nonzero">
            <rect id="矩形" fill="#F4F7F9" height="1024" opacity="0" width="1024" x="0" y="0"></rect>
            <polygon id="路径" fill="#E4EFFF" points="201.370482 594 206 642 177 638.807536"></polygon>
            <polygon id="路径" fill="#F3F8FF" points="200 594 230 631.885817 204.547188 642"></polygon>
            <polygon id="路径" fill="#E4EFFF" points="100.338645 606 106 667 71 662.931464"></polygon>
            <polygon id="路径" fill="#F3F8FF" points="101 606 138 654.205154 106.668679 667"></polygon>
            <polygon id="路径" fill="#E4EFFF" points="148.480744 564 158 665 94 658.708564"></polygon>
            <polygon id="路径" fill="#F3F8FF" points="147 564 214 643.373191 156.526873 665"></polygon>
            <path id="路径"
                  d="M167.226695,342.026586 C163.492711,322.014575 146.009937,307.640823 125.848517,308.006834 C115.061593,307.956383 104.650299,312.004239 96.6816737,319.346752 C92.2164177,317.314169 87.3751145,316.260961 82.4772245,316.256625 C66.9584474,316.009657 53.3722107,326.731143 49.8575212,341.998237 C37.9307461,344.661244 29.3304481,355.181909 29,367.513052 C29.4585952,382.518847 41.8172108,394.341524 56.6790254,393.99176 L160.320975,393.99176 C175.188744,394.357154 187.556538,382.525697 188,367.513052 C187.676143,355.214173 179.115739,344.711538 167.226695,342.026586 L167.226695,342.026586 Z"
                  fill="url(#linearGradient-1)"></path>
            <path id="路径"
                  d="M768.714498,203.095574 C763.32672,194.654828 754.21547,189.411837 744.306491,189.05019 C738.536478,180.120349 728.651433,174.817417 718.124893,175.004806 C709.6853,174.919628 701.567448,178.284389 695.603086,184.339848 C692.872347,183.456175 690.023822,183.003641 687.157409,182.998114 C673.897696,182.998114 662.946468,192.304609 661.820379,204.06619 C651.712515,206.509187 644.434781,215.463021 644,225.990693 C644,238.665795 655.457969,249 669.337032,249 L766.659384,249 C780.735511,249 791.996416,238.665795 791.996416,225.990693 C792.221633,213.943636 781.805297,204.037643 768.714498,203.095574 Z"
                  fill="url(#linearGradient-2)"></path>
            <path id="路径"
                  d="M949.623905,171.742852 C940.122562,152.167323 920.286816,139.710453 898.509647,139.643039 C886.380486,139.669114 874.582387,143.597854 864.863399,150.847162 C853.298536,128.313014 828.182324,116.167009 803.315887,121.083265 C778.449449,125.999521 759.857514,146.78691 757.756177,172.022955 C731.006664,180.455136 714.408255,207.114064 718.662885,234.81122 C722.917516,262.508377 746.754,282.9685 774.803609,283 L933.053129,283 C961.264971,283.053292 985.245783,262.424685 989.381219,234.545632 C993.516652,206.666579 976.554782,179.976968 949.53979,171.854893 L949.623905,171.742852 Z"
                  fill="url(#linearGradient-3)"></path>
            <ellipse id="椭圆形" cx="512" cy="742" fill="url(#linearGradient-4)" rx="512" ry="162"></ellipse>
            <polygon id="路径" fill="#E4EFFF" points="906 606 901.126468 670 865 659.522626"></polygon>
            <polygon id="路径" fill="#F3F8FF" points="904.847021 606 935 662.390418 900 670"></polygon>
            <polygon id="路径" fill="url(#linearGradient-5)"
                     points="707 615 516 585.381726 516 384 707 413.618276"></polygon>
            <polygon id="路径" fill="url(#linearGradient-6)"
                     points="349 618 515 586.84483 515 385 349 416.183417"></polygon>
            <polygon id="路径" fill="url(#linearGradient-7)"
                     points="539 647 348 617.378112 348 416 539 445.593703"></polygon>
            <polygon id="路径" fill="url(#linearGradient-8)"
                     points="541 647 707 615.844829 707 414 541 445.155169"></polygon>
            <polygon id="路径" fill="url(#linearGradient-9)"
                     points="487.515411 494 297 464.176366 348.484589 415 539 444.795257"></polygon>
            <g id="_人物" transform="translate(357.000000, 404.000000)">
                <path id="路径"
                      d="M120.665306,25.3037695 L136,34.0366457 C136,34.0366457 104.872653,33.6982953 91.5502041,44.9970228 C78.2277551,56.2957502 66.5706122,80.8846579 23.8138775,66.2253541 C-18.9428571,51.5660503 13.5444898,35.8280432 29.9477551,38.58012 C46.3510204,41.3321969 68.7216326,35.5237934 79.9069388,23.9208164 C91.092245,12.3178391 116.835102,22.247443 120.665306,25.3037695 Z"
                      fill="url(#linearGradient-10)"></path>
                <path id="路径"
                      d="M76.5069388,9.48278511 C76.5069388,9.48278511 62.9485713,9.71788716 53.7477551,22.1644658 C51.1387755,25.8292918 49.612245,28.1941416 48.3771429,30.102617 C47.1420408,32.0110924 43.7004083,35.3716687 38.6489796,31.2504683 C33.5975509,27.1292677 20.955102,16.5081873 20.955102,16.5081873 L14.2938775,25.4558943 C14.2938775,25.4558943 36.2759184,49.5607684 45.2408163,48.4267468 C54.2057142,47.2788955 64.2391837,48.1916448 75.8130612,33.9195678 C87.3869388,19.6336615 90.3706122,16.2039376 90.3706122,16.2039376 L76.5069388,9.48278511 Z"
                      fill="#143E81"></path>
                <path id="路径"
                      d="M17.6938775,9.93915967 L1.44326531,31.7345018 C1.44326531,31.7345018 7.18857142,37.6535414 13.322449,28.8717886 C19.4563265,20.090036 22.7869388,14.862473 22.7869388,14.862473 L17.6938775,9.93915967 Z"
                      fill="#003A8C"></path>
                <polygon
                    id="路径"
                    fill="#001529"
                    points="16.5836735 8.44557022 8.57632654 17.4209364 10.075102 19.0666507 0.0832653062 30.8079232 1.3877551 32.1355581 19.5395918 11.2391357"></polygon>
                <path id="路径"
                      d="M77.1453062,10.1880912 C77.1453062,10.1880912 66.7787755,13.2444178 60.4367346,25.7601441 C54.1085713,38.2896999 53.1371429,42.9640816 46.1289796,39.5066988 C39.1346938,36.0493157 26.2563266,29.6324129 26.2563266,29.6324129 L20.5804082,39.6035055 C20.5804082,39.6035055 45.9208163,60.0158943 55.7738775,55.5351261 C65.6269388,51.0543578 96.032653,30.5866507 96.032653,30.5866507 C96.032653,30.5866507 98.1836734,22.9527491 97.8228571,22.5931813 C97.4759184,22.2612725 77.1453062,10.1880912 77.1453062,10.1880912 Z"
                      fill="#3E65A3"></path>
                <path id="路径"
                      d="M22.2595918,24.5708042 L6.00897959,46.3661464 C6.00897959,46.3661464 11.7542857,52.2851861 17.8881633,43.5034334 C24.0220408,34.7216806 27.352653,29.4941176 27.352653,29.4941176 L22.2595918,24.5708042 Z"
                      fill="#003A8C"></path>
                <polygon
                    id="路径"
                    fill="#001529"
                    points="21.1493878 23.0772148 13.1420408 32.0525811 14.6408163 33.6982953 4.66285713 45.4395678 5.96734695 46.7672029 24.1053062 25.8707803"></polygon>
                <path id="路径"
                      d="M136,34.0366457 C136,34.0366457 130.991554,-1 102.68,0.0233853539 C74.3684465,1.04677071 68.3330612,4.89138056 67.7502041,8.00302521 C67.3477551,10.105114 69.7902041,10.8242497 69.7902041,10.8242497 C69.7902041,10.8242497 89.607347,18.4028331 92.7714287,32.5642737 C93.2848979,34.9014646 95.0195918,34.1961585 99.9183674,32.2600239 C104.817143,30.3238895 112.241633,28.0005283 121.789388,29.6739016 C127.819588,30.4420544 136,34.0366457 136,34.0366457 Z"
                      fill="#53A4FC"></path>
            </g>
            <polygon id="路径" fill="url(#linearGradient-11)"
                     points="592.591647 494 759 462.896721 707.408351 414 541 445.103277"></polygon>
        </g>
    </g>
</svg>
                      </span>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
              </div>
            </el-drawer>
            <div class="life">
              <svg class="icon" height="27" p-id="4695" t="1679486645375"
                   version="1.1"
                   viewBox="0 0 1024 1024" width="27" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M502.693 752.393l-231.67 121.796c-9.777 5.14-21.87 1.381-27.01-8.395a20 20 0 0 1-2.01-12.688l44.246-257.97a20 20 0 0 0-5.752-17.702L93.07 394.74c-7.91-7.71-8.071-20.373-0.361-28.282a20 20 0 0 1 11.446-5.832l259.015-37.638a20 20 0 0 0 15.059-10.94L494.065 77.34c4.889-9.905 16.881-13.972 26.786-9.084a20 20 0 0 1 9.084 9.084L645.77 312.048a20 20 0 0 0 15.059 10.94l259.015 37.638c10.931 1.588 18.505 11.737 16.917 22.668a20 20 0 0 1-5.832 11.446L743.503 577.434a20 20 0 0 0-5.752 17.703l44.245 257.969c1.868 10.887-5.444 21.226-16.33 23.093a20 20 0 0 1-12.689-2.01l-231.67-121.796a20 20 0 0 0-18.614 0z"
                    fill="#333333" p-id="4696"></path>
              </svg>
            </div>
            <div class="collect">
              <svg class="icon" height="23" p-id="8142" t="1679486866757"
                   version="1.1" viewBox="0 0 1024 1024" width="23" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M522.24 536.762841 972.8 286.72 972.8 773.957159 522.24 1024 522.24 536.762841ZM512 0 972.8 245.768616 512 512 51.2 245.768616 512 0ZM501.76 1024 51.2 785.07265 51.2 286.72 501.76 542.717436 501.76 1024Z"
                    fill="#272636" p-id="8143"></path>
              </svg>
            </div>
          </el-space>
        </div>
        <div class="aside-bottom">
          <div class="system">
            <svg class="icon" height="25" p-id="15208" t="1679487586906" version="1.1"
                 viewBox="0 0 1031 1024" width="25" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M947.375 804.68h-393.3c-9.517-47.678-51.075-83.632-100.822-83.632-49.815 0-91.372 35.955-100.912 83.632h-269.752c-11.363 0-20.587 9.36-20.587 20.925s9.225 20.925 20.587 20.925h269.73c9.54 47.678 51.097 83.632 100.912 83.632 49.77 0 91.327-35.955 100.822-83.632h393.3c11.363 0 20.587-9.36 20.587-20.925s-9.202-20.925-20.565-20.925M453.23 888.267c-34.133 0-61.807-28.035-61.807-62.663s27.675-62.708 61.807-62.708c34.087 0 61.74 28.080 61.74 62.708s-27.652 62.663-61.74 62.663M82.587 219.298h105.030c9.54 47.722 51.053 83.632 100.845 83.632s91.327-35.932 100.867-83.632h558.023c11.363 0 20.587-9.337 20.587-20.903 0-11.543-9.225-20.925-20.587-20.925h-558c-9.54-47.678-51.053-83.61-100.867-83.61s-91.305 35.955-100.845 83.632h-105.053c-11.363 0-20.587 9.382-20.587 20.925 0 11.565 9.225 20.88 20.587 20.88M288.485 135.687c34.11 0 61.762 28.103 61.762 62.73s-27.653 62.708-61.762 62.708c-34.133 0-61.785-28.080-61.785-62.708 0-34.627 27.675-62.73 61.785-62.73M947.375 491.098h-63.877c-9.54-47.722-51.053-83.655-100.845-83.655s-91.35 35.933-100.868 83.655h-599.197c-11.363 0-20.587 9.338-20.587 20.88 0 11.565 9.225 20.925 20.587 20.925h599.175c9.54 47.7 51.075 83.633 100.867 83.633s91.328-35.955 100.845-83.633h63.877c11.363 0 20.587-9.36 20.587-20.925 0.023-11.543-9.202-20.88-20.565-20.88M782.653 574.708c-34.155 0-61.762-28.080-61.762-62.73 0-34.627 27.63-62.73 61.762-62.73 34.132 0 61.762 28.102 61.762 62.73 0 34.65-27.652 62.73-61.762 62.73z"
                  p-id="15209"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="main-chat-box">
        <div class="left-box">
          <div class="top-search">
            <el-input
                v-model="SearchValue"
                :prefix-icon="Search"
                placeholder="可以搜索哦~~"
                size="large"
            />
          </div>
          <div class="friend-box">
            <el-tabs stretch style="height: 815px;" type="border-card">
              <el-tab-pane :lazy="true">
                <template #label>
                  <el-tooltip effect="light" placement="top">
                    <template #content>
                      <span style="font-size: 15px">chat</span>
                    </template>
                    <span style="vertical-align: middle;">
                      <el-icon size="large"><ChatLineRound/></el-icon>
                    </span>
                  </el-tooltip>
                </template>
                <div style="overflow: auto;height: 730px">
                  <el-scrollbar>
                    <el-card v-for="id in store.state.pTotal" v-if="!load" :key="id" class="chat-list-box"
                             @click="changeChat(store.state.chat_list[id])">
                      <div style="display: flex">
                        <el-badge v-if="store.state.chat_list[id].unread===0" :max="99">
                          <el-avatar :src="store.state.chat_list[id].icon" size="large"/>
                        </el-badge>
                        <el-badge v-else :max="99" :value="store.state.chat_list[id].unread">
                          <el-avatar :src="store.state.chat_list[id].icon" size="large"/>
                        </el-badge>
                        <div style="margin-left: 1em">
                          <span>{{ store.state.chat_list[id].tick }}</span>
                          <div style="margin-top: 7px">
                            <span style="font-size: 14px;line-height: 12px;">{{
                                store.state.chat_list[id].content
                              }}</span>
                          </div>
                        </div>
                      </div>
                      <div style="float: right;padding-bottom: 10px">
                        <span style="font-size: 10px">{{ store.state.chat_list[id].time }}</span>
                      </div>
                    </el-card>
                    <div v-else v-loading="true" element-loading-text="数据加载中" style="margin-top: 300px">
                    </div>
                  </el-scrollbar>
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <template #label>
                  <el-tooltip effect="light" placement="top">
                    <template #content>
                      <span style="font-size: 15px">friend</span>
                    </template>
                    <span style="vertical-align: middle;">
                      <el-icon size="large"><User/></el-icon>
                    </span>
                  </el-tooltip>
                </template>
                <div style="overflow: auto;height: 730px">
                  <el-scrollbar>
                    <el-card v-for="chat in store.state.friendList" :key="chat.id" class="chat-list-box">
                      <div style="display: flex">
                        <el-avatar :src="chat.image" size="large"/>
                        <div style="margin-left: 1em;margin-top: 1em">
                          <span>{{ chat.tick }}</span>
                        </div>
                      </div>
                    </el-card>
                  </el-scrollbar>
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <template #label>
                  <el-tooltip effect="light" placement="top">
                    <template #content>
                      <span style="font-size: 15px">group</span>
                    </template>
                    <span style="vertical-align: middle;">
                    <el-icon size="large"><Connection/></el-icon>
                  </span>
                  </el-tooltip>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="chat-box-main">
          <div v-if="ChatInfo.show">
            <Chat v-if="!chat_load" :info="ChatInfo"/>
            <div v-else v-loading="true" element-loading-text="努力加载中💪" style="margin-top: 400px">
            </div>
          </div>
          <div v-if="!ChatInfo.show" style="display: flex;justify-content: center;align-items: center;height: 100%">
            <svg height="600" viewBox="0 0 400 250" width="750" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <linearGradient id="linear-gradient" gradientUnits="objectBoundingBox" x1="0.5" x2="0.5" y2="1">
                  <stop offset="0" stop-color="#f8f8f8" stop-opacity="0.082"/>
                  <stop offset="1" stop-color="#7c7c7c" stop-opacity="0.059"/>
                </linearGradient>
                <linearGradient id="linear-gradient-3" gradientUnits="objectBoundingBox" x1="0.5" x2="0.5" y2="1">
                  <stop offset="0" stop-color="#f0eeef" stop-opacity="0"/>
                  <stop offset="1" stop-color="#d5d5d5"/>
                </linearGradient>
              </defs>
              <g id="组_7185" data-name="组 7185" transform="translate(-175 -555)">
                <g id="组_7166" data-name="组 7166" transform="translate(0 0.215)">
                  <rect id="矩形_2865" data-name="矩形 2865" fill="none" height="250" transform="translate(175 554.785)"
                        width="400"/>
                  <g id="组_7107" data-name="组 7107">
                    <g id="联合_17" data-name="联合 17" fill="#fff" transform="translate(228 602.959)">
                      <path
                          d="M 47.7234001159668 38.99959945678711 C 47.64221954345703 38.99959945678711 47.56130981445312 38.998779296875 47.48051071166992 38.99720001220703 L 47.45920944213867 38.99678039550781 L 47.43791961669922 38.99726867675781 C 47.37173080444336 38.99879837036133 47.30575180053711 38.99959945678711 47.23920059204102 38.99959945678711 L 13.76010131835938 38.99959945678711 C 13.69385147094727 38.99959945678711 13.62770080566406 38.9987907409668 13.56181144714355 38.99726867675781 L 13.54047107696533 38.99678039550781 L 13.51913070678711 38.99720001220703 C 13.43839073181152 38.9987907409668 13.35792064666748 38.99959945678711 13.27680110931396 38.99959945678711 C 10.00017070770264 38.99959945678711 6.918890953063965 37.7057991027832 4.600571155548096 35.35654830932617 C 2.278711080551147 33.00370025634766 1.000001072883606 29.87454032897949 1.000001072883606 26.54549980163574 C 1.000001072883606 23.80984878540039 1.857431054115295 21.21405982971191 3.479591131210327 19.03878021240234 C 5.04793119430542 16.93564987182617 7.275061130523682 15.36341953277588 9.750711441040039 14.61170959472656 L 10.14944076538086 14.49063968658447 L 10.34421062469482 14.12226963043213 C 12.4890308380127 10.06569004058838 16.63750076293945 7.545699596405029 21.17070198059082 7.545699596405029 C 22.44535064697266 7.545699596405029 23.70130157470703 7.742859840393066 24.90365028381348 8.131710052490234 L 25.70767021179199 8.391739845275879 L 26.09818077087402 7.642349720001221 C 28.23322105407715 3.545199632644653 32.39464950561523 0.9999997019767761 36.95849990844727 0.9999997019767761 C 40.21546173095703 0.9999997019767761 43.28353118896484 2.280559778213501 45.59754943847656 4.605799674987793 C 47.91365051269531 6.933129787445068 49.20536041259766 10.03491973876953 49.2347297668457 13.3397798538208 L 49.24199295043945 14.15695953369141 L 50.04425048828125 14.31258964538574 C 55.8131217956543 15.43169975280762 60.00020217895508 20.57637977600098 60.00020217895508 26.54549980163574 C 60.00020217895508 29.87454032897949 58.72149276733398 33.00370025634766 56.39963150024414 35.35654830932617 C 54.0813102722168 37.7057991027832 51.00003051757812 38.99959945678711 47.7234001159668 38.99959945678711 Z"
                          stroke="none"/>
                      <path
                          d="M 47.7234001159668 37.99959945678711 C 50.73042297363281 37.99959945678711 53.55891036987305 36.81148910522461 55.68786239624023 34.65414047241211 C 57.8238525390625 32.48963928222656 59.00020217895508 29.60993957519531 59.00020217895508 26.54549980163574 C 59.00020217895508 21.05422019958496 55.15359115600586 16.3223991394043 49.85380935668945 15.29428958892822 L 48.24929046630859 14.98301982879639 L 48.23477172851562 13.34865951538086 C 48.20772933959961 10.30663967132568 47.0194206237793 7.452209949493408 44.88873291015625 5.311189651489258 C 42.7637825012207 3.175939798355103 39.94744110107422 1.999999761581421 36.95849990844727 1.999999761581421 C 32.76877212524414 1.999999761581421 28.94715118408203 4.339099884033203 26.9849910736084 8.104479789733887 L 26.20398139953613 9.603240013122559 L 24.59593200683594 9.083189964294434 C 23.49314117431641 8.726539611816406 22.34072113037109 8.545700073242188 21.17070198059082 8.545700073242188 C 17.00910186767578 8.545700073242188 13.19938087463379 10.86161994934082 11.22825145721436 14.58967971801758 L 10.83870124816895 15.32643985748291 L 10.04126071929932 15.56857013702393 C 7.768461227416992 16.25868988037109 5.722841262817383 17.70339965820312 4.281230926513672 19.6365795135498 C 2.788841009140015 21.63784980773926 2.000001192092896 24.02692031860352 2.000001192092896 26.54549980163574 C 2.000001192092896 29.60993957519531 3.176351070404053 32.48963928222656 5.312341213226318 34.65414047241211 C 7.441290855407715 36.81148910522461 10.2697811126709 37.99959945678711 13.27680110931396 37.99959945678711 C 13.35132122039795 37.99959945678711 13.42525100708008 37.99885940551758 13.49944114685059 37.99739837646484 L 13.54211139678955 37.99655914306641 L 13.58479118347168 37.99753952026367 C 13.64304065704346 37.99887847900391 13.7015209197998 37.99959945678711 13.76010131835938 37.99959945678711 L 47.23920059204102 37.99959945678711 C 47.29804992675781 37.99959945678711 47.35638046264648 37.9988899230957 47.41490173339844 37.99753952026367 L 47.45750045776367 37.99655914306641 L 47.50009155273438 37.99739074707031 C 47.57438278198242 37.99884796142578 47.64876937866211 37.99959945678711 47.7234001159668 37.99959945678711 M 47.7234001159668 39.99959945678711 C 47.63568115234375 39.99959945678711 47.54824066162109 39.99871826171875 47.46092987060547 39.99700927734375 C 47.38708114624023 39.99871063232422 47.31346130371094 39.99959945678711 47.23920059204102 39.99959945678711 L 13.76010131835938 39.99959945678711 C 13.68617153167725 39.99959945678711 13.61236095428467 39.99869918823242 13.53883075714111 39.99700927734375 C 13.4515209197998 39.99872970581055 13.36451148986816 39.99959945678711 13.27680110931396 39.99959945678711 C 5.944500923156738 39.99959945678711 1.089477564164554e-06 33.97589874267578 1.089477564164554e-06 26.54549980163574 C 1.089477564164554e-06 20.45932006835938 3.987791061401367 15.31649017333984 9.460170745849609 13.65485000610352 C 11.69738101959229 9.423540115356445 16.10245132446289 6.545699596405029 21.17070198059082 6.545699596405029 C 22.57952117919922 6.545699596405029 23.93739128112793 6.768219947814941 25.21136093139648 7.180229663848877 C 27.43645095825195 2.910279750823975 31.86205101013184 -2.716064386731887e-07 36.95849990844727 -2.716064386731887e-07 C 44.25008010864258 -2.716064386731887e-07 50.16916275024414 5.957449913024902 50.23469161987305 13.33088970184326 C 56.36660003662109 14.52042961120605 61.00020217895508 19.98493957519531 61.00020217895508 26.54549980163574 C 61.00020217895508 33.97589874267578 55.05570220947266 39.99959945678711 47.7234001159668 39.99959945678711 Z"
                          fill="#c6c7c6" stroke="none"/>
                    </g>
                    <path id="路径_8572" d="M196.9,694.656Z" data-name="路径 8572" fill="#3f3d56"
                          transform="translate(181.006 79.226)"/>
                    <path id="路径_8419"
                          d="M146.016.031C288.549-4.921,305.707,160.175,303,164.171H0S3.482,4.983,146.016.031Z"
                          data-name="路径 8419"
                          fill="url(#linear-gradient)" transform="translate(223.375 612.827)"/>
                    <g id="矩形_2783" data-name="矩形 2783" fill="#fff" stroke="#c6c7c6"
                       stroke-dasharray="4" stroke-width="2" transform="translate(272 567.459)">
                      <rect height="151" rx="20" stroke="none" width="99"/>
                      <rect fill="none" height="149" rx="19" width="97" x="1" y="1"/>
                    </g>
                    <path id="路径_8418" d="M146.016,0C288.549-3.53,305.707,114.151,303,117H0S3.482,3.53,146.016,0Z"
                          data-name="路径 8418"
                          fill="url(#linear-gradient)" transform="translate(223.375 659.998)"/>
                    <ellipse id="椭圆_622" cx="192.5" cy="20.344" data-name="椭圆 622" fill="url(#linear-gradient-3)"
                             opacity="0.6"
                             rx="192.5" ry="20.344" transform="translate(182.5 756.314)"/>
                    <g id="联合_9" data-name="联合 9" fill="#eee" opacity="0.1"
                       transform="translate(335.5 776.658) rotate(180)">
                      <path
                          d="M 32.46386337280273 24.12219619750977 C 28.2704963684082 24.12219619750977 24.06496238708496 23.53238487243652 19.96408462524414 22.36916351318359 C 16.34031867980957 21.34126281738281 12.81243991851807 19.85080718994141 9.761839866638184 18.05891799926758 C 6.948851108551025 16.40659713745117 4.585395336151123 14.53477382659912 2.926973342895508 12.64578533172607 C 1.339239954948425 10.83730697631836 0.5000066161155701 9.141229629516602 0.5000066161155701 7.740896224975586 L 0.5000066161155701 0.4999962151050568 L 32.45639801025391 0.4999962151050568 L 44.96011734008789 0.8792295455932617 L 44.97816848754883 0.5398393869400024 C 46.18122482299805 0.5365503430366516 47.65688705444336 0.534896194934845 49.40187454223633 0.534896194934845 C 57.62921905517578 0.534896194934845 69.13085174560547 0.5725184679031372 69.24607086181641 0.5728962421417236 L 86.93579864501953 0.5728962421417236 L 86.93579864501953 3.845696210861206 C 86.93579864501953 5.480229377746582 86.31000518798828 7.074240684509277 85.07582855224609 8.583462715148926 C 83.85479736328125 10.0765962600708 82.09754180908203 11.42236328125 79.85287475585938 12.5833854675293 C 75.18068695068359 15.00000762939453 68.95771789550781 16.33089637756348 62.33031845092773 16.33089637756348 C 61.57183837890625 16.33089637756348 60.79644012451172 16.29038429260254 60.02563858032227 16.21049690246582 L 59.81691741943359 16.18886375427246 L 59.6552619934082 16.32267379760742 C 56.83706283569336 18.6555290222168 52.90069580078125 20.60766220092773 48.2717170715332 21.96804046630859 C 43.47636032104492 23.37729644775391 38.01009368896484 24.12219619750977 32.46386337280273 24.12219619750977 Z"
                          stroke="none"/>
                      <path
                          d="M 1 0.9999961853027344 L 1 7.740901947021484 C 1 8.999773025512695 1.817787170410156 10.62453746795654 3.302703857421875 12.31590175628662 C 4.9263916015625 14.16532516479492 7.24749755859375 16.00213623046875 10.01507568359375 17.6277961730957 C 13.02955627441406 19.39846611022949 16.51705169677734 20.87166595458984 20.10051727294922 21.88813781738281 C 24.15701293945312 23.03877258300781 28.31663513183594 23.62219619750977 32.46385955810547 23.62219619750977 C 37.9630241394043 23.62219619750977 43.38055419921875 22.88431358337402 48.13074111938477 21.48832511901855 C 52.6951904296875 20.14692497253418 56.57004928588867 18.22747802734375 59.3364372253418 15.93751430511475 L 59.65972900390625 15.66989040374756 L 60.07719039916992 15.71316051483154 C 60.83087158203125 15.79127883911133 61.58892822265625 15.83089065551758 62.33031845092773 15.83089065551758 C 68.87925720214844 15.83089065551758 75.02064514160156 14.51984310150146 79.62315368652344 12.13926696777344 C 81.80686187744141 11.00978469848633 83.51117706298828 9.706937789916992 84.68876647949219 8.266937255859375 C 85.84799957275391 6.849361419677734 86.435791015625 5.361843109130859 86.435791015625 3.845701217651367 L 86.435791015625 1.072902679443359 L 69.24441528320312 1.072902679443359 C 69.12920379638672 1.072513580322266 57.62838745117188 1.034902572631836 49.40187072753906 1.034902572631836 C 47.64863967895508 1.034902572631836 46.16755676269531 1.03656005859375 44.96299362182617 1.039850234985352 L 44.94495391845703 1.378995895385742 L 32.44866943359375 0.9999961853027344 L 1 0.9999961853027344 M 0 -3.814697265625e-06 L 32.46385955810547 -3.814697265625e-06 L 44.97527313232422 0.37945556640625 C 42.62511825561523 0.2005729675292969 41.05533218383789 0.07720756530761719 41.15604782104492 0.07290267944335938 C 41.87823486328125 0.04439735412597656 45.23943710327148 0.03489875793457031 49.4018669128418 0.03489875793457031 C 57.72520446777344 0.03489875793457031 69.24771118164062 0.07290267944335938 69.24771118164062 0.07290267944335938 L 87.435791015625 0.07290267944335938 C 87.435791015625 0.07290267944335938 87.435791015625 2.9501953125 87.435791015625 3.845701217651367 C 87.435791015625 11.01689052581787 76.19569396972656 16.83089065551758 62.33031845092773 16.83089065551758 C 61.53567123413086 16.83089065551758 60.74988555908203 16.78824234008789 59.97409820556641 16.70783233642578 C 54.23109436035156 21.46179580688477 44.05678939819336 24.62219619750977 32.46385955810547 24.62219619750977 C 14.53498077392578 24.62219619750977 0 13.89689064025879 0 7.740901947021484 C 0 5.986795425415039 0 -3.814697265625e-06 0 -3.814697265625e-06 Z"
                          fill="#c6c7c6" stroke="none"/>
                    </g>
                    <g id="矩形_2781" data-name="矩形 2781" fill="#f8f8f8" stroke="#c6c7c6"
                       stroke-width="2" transform="translate(285 585.998)">
                      <rect height="191" rx="20" stroke="none" width="133"/>
                      <rect fill="none" height="189" rx="19" width="131" x="1" y="1"/>
                    </g>
                    <rect id="矩形_2785" data-name="矩形 2785" fill="#fff" height="148" rx="9"
                          transform="translate(296 606.998)" width="111"/>
                    <g id="联合_10" data-name="联合 10" fill="#fff" transform="translate(418 623.5)">
                      <path
                          d="M 66.50009918212891 53.99990463256836 C 66.41445159912109 53.99990463256836 66.32815551757812 53.99919891357422 66.2427978515625 53.99797439575195 L 66.22701263427734 53.99774932861328 L 66.21125030517578 53.99802017211914 C 66.14101409912109 53.99922180175781 66.07022857666016 53.99990463256836 65.99971008300781 53.99990463256836 L 18.9998950958252 53.99990463256836 C 18.92940139770508 53.99990463256836 18.85901260375977 53.99923324584961 18.78878974914551 53.99803161621094 L 18.77301406860352 53.99776077270508 L 18.75723648071289 53.99798583984375 C 18.67190742492676 53.99921035766602 18.58603668212891 53.99990463256836 18.50040245056152 53.99990463256836 C 13.82581329345703 53.99990463256836 9.431036949157715 52.17960739135742 6.125660419464111 48.87432861328125 C 2.82033109664917 45.56911468505859 1.000001668930054 41.17463302612305 1.000001668930054 36.50039672851562 C 1.000001668930054 32.65945816040039 2.220366239547729 29.01439666748047 4.529178142547607 25.95929145812988 C 5.640425205230713 24.48884391784668 6.969178199768066 23.20772743225098 8.478554725646973 22.15151596069336 C 10.00842475891113 21.08096122741699 11.68743705749512 20.26753807067871 13.46894264221191 19.73383331298828 L 13.86713123321533 19.61453819274902 L 14.06342506408691 19.24814987182617 C 17.11966133117676 13.54368019104004 23.03468322753906 9.999997138977051 29.50020217895508 9.999997138977051 C 31.31936645507812 9.999997138977051 33.11151885986328 10.27765655517578 34.82687377929688 10.82526779174805 L 35.62434387207031 11.07985591888428 L 36.0152587890625 10.33960914611816 C 37.47940063476562 7.567091464996338 39.666259765625 5.23175048828125 42.33938980102539 3.586056232452393 C 45.08745956420898 1.89424455165863 48.25508499145508 0.9999974966049194 51.49980163574219 0.9999974966049194 C 56.14642333984375 0.9999974966049194 60.52237701416016 2.801656246185303 63.82157897949219 6.073079586029053 C 67.11875152587891 9.342479705810547 68.95760345458984 13.69878578186035 68.99937438964844 18.33950424194336 L 69.00675201416016 19.15866851806641 L 69.81134033203125 19.31266784667969 C 78.03257751464844 20.88628005981445 83.99960327148438 28.11476135253906 83.99960327148438 36.50039672851562 C 83.99960327148438 41.17459869384766 82.17930603027344 45.5690803527832 78.87404632568359 48.87434005737305 C 75.56877899169922 52.17960739135742 71.17429351806641 53.99990463256836 66.50009918212891 53.99990463256836 Z"
                          stroke="none"/>
                      <path
                          d="M 66.50009918212891 52.99990081787109 C 70.90718841552734 52.99990081787109 75.05055236816406 51.28362655639648 78.16693878173828 48.167236328125 C 81.2833251953125 45.05084991455078 82.99960327148438 40.90748977661133 82.99960327148438 36.50040054321289 C 82.99960327148438 28.59381294250488 77.37407684326172 21.77838706970215 69.62336730957031 20.29483795166016 L 68.01419067382812 19.98683738708496 L 67.99942779541016 18.34851264953613 C 67.96002960205078 13.97308826446533 66.22624969482422 9.865762710571289 63.11746597290039 6.783163070678711 C 60.00680160522461 3.698700428009033 55.88090133666992 2.000000476837158 51.49980163574219 2.000000476837158 C 48.44031524658203 2.000000476837158 45.45397567749023 2.842912912368774 42.86365127563477 4.437625408172607 C 40.34262847900391 5.989663124084473 38.28026580810547 8.192025184631348 36.89952850341797 10.8065881729126 L 36.11770248413086 12.28707504272461 L 34.52275085449219 11.77790069580078 C 32.90585327148438 11.26172542572021 31.21601486206055 11 29.50020217895508 11 C 23.40398979187012 11 17.82672691345215 14.34146308898926 14.94488906860352 19.72039985656738 L 14.55228900909424 20.45318794250488 L 13.75592708587646 20.69176292419434 C 12.07683944702148 21.19478797912598 10.49416446685791 21.96158790588379 9.051901817321777 22.97083854675293 C 7.628326416015625 23.96701240539551 6.375089168548584 25.17532539367676 5.32698917388916 26.56220054626465 C 3.15045166015625 29.44227600097656 2.000001668930054 32.87884902954102 2.000001668930054 36.50040054321289 C 2.000001668930054 40.90751266479492 3.716301679611206 45.05087661743164 6.832751750946045 48.16721343994141 C 9.949264526367188 51.28361129760742 14.09291458129883 52.99990081787109 18.50040245056152 52.99990081787109 C 18.58120155334473 52.99990081787109 18.6622257232666 52.99924850463867 18.74275207519531 52.99808883666992 L 18.77446365356445 52.99762725830078 L 18.8061637878418 52.99817657470703 C 18.87060165405273 52.99928665161133 18.93518829345703 52.99990081787109 18.99990081787109 52.99990081787109 L 65.99970245361328 52.99990081787109 C 66.06455230712891 52.99990081787109 66.129638671875 52.99927520751953 66.19419860839844 52.99816131591797 L 66.22560119628906 52.99762725830078 L 66.25700378417969 52.99807357788086 C 66.33765411376953 52.99922561645508 66.419189453125 52.99990081787109 66.50009918212891 52.99990081787109 M 66.50009918212891 54.99990081787109 C 66.40967559814453 54.99990081787109 66.31856536865234 54.99916458129883 66.22843933105469 54.99787521362305 C 66.15250396728516 54.99917602539062 66.07596588134766 54.99990081787109 65.99970245361328 54.99990081787109 L 18.99990081787109 54.99990081787109 C 18.92365074157715 54.99990081787109 18.8475399017334 54.99918746948242 18.7716007232666 54.99787521362305 C 18.68148994445801 54.99917602539062 18.5908260345459 54.99990081787109 18.50040245056152 54.99990081787109 C 8.28270149230957 54.99990081787109 1.635742137295892e-06 46.71720123291016 1.635742137295892e-06 36.50040054321289 C 1.635742137295892e-06 28.13116264343262 5.556351661682129 21.06040000915527 13.18196392059326 18.77588844299316 C 16.29923820495605 12.95750045776367 22.4374885559082 9 29.50020217895508 9 C 31.46386337280273 9 33.35528945922852 9.305763244628906 35.13098907470703 9.872637748718262 C 38.231689453125 4.001125335693359 44.3984260559082 4.089355343239731e-07 51.49980163574219 4.089355343239731e-07 C 61.66075134277344 4.089355343239731e-07 69.90804290771484 8.191125869750977 69.99935150146484 18.33049964904785 C 78.54347991943359 19.96591377258301 84.99960327148438 27.47883796691895 84.99960327148438 36.50040054321289 C 84.99960327148438 46.71720123291016 76.71690368652344 54.99990081787109 66.50009918212891 54.99990081787109 Z"
                          fill="#c6c7c6" stroke="none"/>
                    </g>
                    <line id="直线_2046" data-name="直线 2046" fill="none" stroke="#c6c7c6"
                          stroke-linecap="round" stroke-width="2" transform="translate(361 612.749) rotate(90)"
                          y2="19"/>
                    <g id="椭圆_652" data-name="椭圆 652" fill="#fff" stroke="#c6c7c6"
                       stroke-width="1" transform="translate(357 756.347) rotate(90)">
                      <circle cx="4" cy="4" r="4" stroke="none"/>
                      <circle cx="4" cy="4" fill="none" r="3.5"/>
                    </g>
                    <rect id="矩形_2797" data-name="矩形 2797" fill="#e5ecec" height="5" rx="2"
                          transform="translate(337 630)" width="49"/>
                    <rect id="矩形_2833" data-name="矩形 2833" fill="#e5ecec" height="5" rx="2"
                          transform="translate(337 643)" width="49"/>
                    <rect id="矩形_2834" data-name="矩形 2834" fill="#e5ecec" height="5" rx="2"
                          transform="translate(337 657)" width="21"/>
                    <rect id="矩形_2836" data-name="矩形 2836" fill="#e5ecec" height="5" rx="2"
                          transform="translate(337 672)" width="21"/>
                    <rect id="矩形_2835" data-name="矩形 2835" fill="#e5ecec" height="5" rx="2"
                          transform="translate(326 733)" width="49"/>
                    <path id="icon"
                          d="M21.593,39.1c.09-8.361,5.45-13.765,13.772-13.837,6.963-.06,13.929-.118,20.887.042,2.493.058,2.976-.877,2.658-3.067a12.163,12.163,0,0,0-12.261-10.35q-16.973-.122-33.945-.006C5.277,11.929.281,16.822.094,24.207Q-.1,31.849.1,39.5c.153,6.238,3.638,10.594,9.718,11.955,1.9.426,2.206.9,1.457,2.623-1.366,3.138-2.541,6.359-3.8,9.545l.761.6c3.564-2.216,7.068-4.537,10.718-6.6A4.586,4.586,0,0,0,21.636,52.9c-.183-4.592-.092-9.2-.043-13.8ZM69.627,27.834q-17.344-.367-34.7,0C28.609,27.955,24.446,32.2,24.2,38.5c-.246,6.21-.26,12.445.007,18.653.284,6.6,4.756,10.577,11.489,10.68,3.731.056,7.47.151,11.193-.035a12.212,12.212,0,0,1,7.657,2.195c5.513,3.614,11.184,6.985,17.684,11.007-1.177-2.988-1.944-4.923-2.7-6.862s-1.51-3.906-2.322-6.012c.7-.118,1.17-.237,1.643-.271,7.736-.56,11.474-4.462,11.55-12.184.054-5.473.1-10.948-.016-16.418-.147-6.8-4.127-11.273-10.754-11.413Z"
                          fill="#fdfdfd" stroke="#c6c7c6" stroke-width="2" transform="translate(379.471 679.353)"/>
                    <path id="路径_8576"
                          d="M6.765,4.173c3.736,0,6.765-1.631,6.765,2.106A6.765,6.765,0,0,1,0,6.278C0,2.542,3.029,4.173,6.765,4.173Z"
                          data-name="路径 8576"
                          fill="#ffe4d0" transform="translate(424.356 724.956)"/>
                    <path id="多边形_21"
                          d="M5.753,3.112a1,1,0,0,1,1.912,0L8.13,4.626a1,1,0,0,0,.662.662l1.514.465a1,1,0,0,1,0,1.912L8.792,8.13a1,1,0,0,0-.662.662l-.465,1.514a1,1,0,0,1-1.912,0L5.288,8.792a1,1,0,0,0-.662-.662L3.112,7.665a1,1,0,0,1,0-1.912l1.514-.465a1,1,0,0,0,.662-.662Z"
                          data-name="多边形 21"
                          fill="#e97c2c" transform="translate(431.121 593.58)"/>
                    <path id="多边形_22"
                          d="M6.529,0,8.063,4.994l4.994,1.534L8.063,8.063,6.529,13.057,4.994,8.063,0,6.529,4.994,4.994Z"
                          data-name="多边形 22"
                          fill="#e97c2c" transform="translate(413.168 562.569)"/>
                    <path id="多边形_23"
                          d="M8.161,0l1.918,6.243,6.243,1.918-6.243,1.918L8.161,16.321,6.243,10.078,0,8.161,6.243,6.243Z"
                          data-name="多边形 23"
                          fill="#e97c2c" transform="translate(444.179 569.098)"/>
                    <path id="多边形_27"
                          d="M6.529,0,8.063,4.994l4.994,1.534L8.063,8.063,6.529,13.057,4.994,8.063,0,6.529,4.994,4.994Z"
                          data-name="多边形 27"
                          fill="#e97c2c" transform="translate(270.471 749.818)"/>
                    <g id="组_7086" data-name="组 7086" transform="translate(-11.937 52.583)">
                      <path id="路径_8577" d="M908.476,727.63V716.237S912.916,724.314,908.476,727.63Z"
                            data-name="路径 8577"
                            fill="#f1f1f1" transform="translate(-515.458 -4.81)"/>
                      <path id="路径_8578" d="M865.321,747.347l-8.393-7.7S865.88,741.835,865.321,747.347Z"
                            data-name="路径 8578"
                            fill="#f1f1f1" transform="translate(-472.028 -24.53)"/>
                      <path id="路径_8579" d="M280.4,727.63V716.237S275.963,724.314,280.4,727.63Z" data-name="路径 8579"
                            fill="#f1f1f1" transform="translate(15.364 -4.81)"/>
                      <path id="路径_8580" d="M289.083,747.347l8.392-7.7S288.523,741.834,289.083,747.347Z"
                            data-name="路径 8580"
                            fill="#f1f1f1" transform="translate(6.409 -24.53)"/>
                      <path id="路径_8584"
                            d="M472.581,232.205h-7.517a.508.508,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.517a.508.508,0,0,1,.508.508V231.7A.508.508,0,0,1,472.581,232.205Z"
                            data-name="路径 8584"
                            fill="#40d79e" transform="translate(-132.091 352.508)"/>
                      <path id="路径_8588"
                            d="M472.411,320.566h-7.517a.509.509,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.517a.508.508,0,0,1,.508.508v7.517A.508.508,0,0,1,472.411,320.566Z"
                            data-name="路径 8588"
                            fill="#e5e5e5" transform="translate(-131.947 278.063)"/>
                      <path id="路径_8589"
                            d="M544.647,320.566H537.13a.509.509,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.516a.509.509,0,0,1,.508.508v7.517A.509.509,0,0,1,544.647,320.566Z"
                            data-name="路径 8589"
                            fill="#e5e5e5" transform="translate(-202.167 335.736)"/>
                      <path id="路径_8590"
                            d="M616.883,320.566h-7.517a.508.508,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.517a.509.509,0,0,1,.508.508v7.517A.509.509,0,0,1,616.883,320.566Z"
                            data-name="路径 8590"
                            fill="#40d79e" transform="translate(-253.639 336.643)"/>
                      <path id="路径_8591"
                            d="M689.119,320.566H681.6a.508.508,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.517a.509.509,0,0,1,.508.508v7.517A.509.509,0,0,1,689.119,320.566Z"
                            data-name="路径 8591"
                            fill="#e5ecec" transform="translate(-325.876 353.332)"/>
                      <path id="路径_8592"
                            d="M472.24,408.926h-7.517a.508.508,0,0,1-.508-.508V400.9a.508.508,0,0,1,.508-.508h7.517a.509.509,0,0,1,.508.508v7.517A.509.509,0,0,1,472.24,408.926Z"
                            data-name="路径 8592"
                            fill="#e5e5e5" transform="translate(-131.803 203.619)"/>
                      <path id="路径_8593"
                            d="M544.476,408.926H536.96a.509.509,0,0,1-.508-.508V400.9a.508.508,0,0,1,.508-.508h7.517a.508.508,0,0,1,.508.508v7.517A.509.509,0,0,1,544.476,408.926Z"
                            data-name="路径 8593"
                            fill="#e5e5e5" transform="translate(-202.024 261.292)"/>
                      <path id="路径_8596"
                            d="M472.069,497.286h-7.517a.509.509,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.517a.508.508,0,0,1,.508.508v7.517A.508.508,0,0,1,472.069,497.286Z"
                            data-name="路径 8596"
                            fill="#e5e5e5" transform="translate(-131.659 129.174)"/>
                      <path id="路径_8597"
                            d="M544.306,497.286h-7.517a.509.509,0,0,1-.508-.508v-7.517a.508.508,0,0,1,.508-.508h7.517a.508.508,0,0,1,.508.508v7.517A.509.509,0,0,1,544.306,497.286Z"
                            data-name="路径 8597"
                            fill="#e5e5e5" transform="translate(-201.879 186.847)"/>
                      <circle id="椭圆_690" cx="1.016" cy="1.016" data-name="椭圆 690" fill="#e5e5e5"
                              r="1.016" transform="translate(339.738 697.338)"/>
                      <circle id="椭圆_691" cx="1.016" cy="1.016" data-name="椭圆 691" fill="#e5e5e5"
                              r="1.016" transform="translate(343.394 697.338)"/>
                      <circle id="椭圆_692" cx="1.016" cy="1.016" data-name="椭圆 692" fill="#e5e5e5"
                              r="1.016" transform="translate(347.051 697.338)"/>
                      <path id="路径_8604"
                            d="M315.216,787.32H184.658a.158.158,0,1,1,0-.315H315.216a.158.158,0,1,1,0,.315Z"
                            data-name="路径 8604"
                            fill="#cbcbcb" transform="translate(94.5 -64.433)"/>
                      <path id="路径_8605"
                            d="M491.945,537.714a2.055,2.055,0,0,0-.277-3.139l1.984-7.029-3.617,1.15-1.329,6.5a2.066,2.066,0,0,0,3.239,2.519Z"
                            data-name="路径 8605"
                            fill="#ffb7b7" transform="translate(-161.546 154.164)"/>
                      <path id="路径_8606"
                            d="M492.963,418.377a.943.943,0,0,1-.2.017l-3.469-.07a.92.92,0,0,1-.891-1.054l3.519-23.779a2.915,2.915,0,0,1,2.875-2.475h0a2.9,2.9,0,0,1,2.808,3.595l-2.495,10.1L493.7,417.575A.914.914,0,0,1,492.963,418.377Z"
                            data-name="路径 8606"
                            fill="#e97c2c" transform="translate(-161.536 269.193)"/>
                      <path id="路径_8607" d="M342.1,678.264h1.931l.919-7.447H342.1Z" data-name="路径 8607"
                            fill="#ffb7b7" transform="translate(-9.226 46.844)"/>
                      <path id="路径_8608" d="M523.478,799.107h3.8a2.423,2.423,0,0,1,2.423,2.423v.079h-6.226Z"
                            data-name="路径 8608"
                            fill="#2f2e41" transform="translate(-191.093 -74.629)"/>
                      <path id="路径_8609" d="M394.382,674.531l1.919.215,1.743-7.3-2.832-.318Z" data-name="路径 8609"
                            fill="#ffb7b7" transform="translate(-53.271 49.951)"/>
                      <path id="路径_8610"
                            d="M574.729,794.8l3.779.424h0a2.423,2.423,0,0,1,2.138,2.678l-.009.078-6.187-.694Z"
                            data-name="路径 8610"
                            fill="#2f2e41" transform="translate(-234.037 -71.002)"/>
                      <path id="路径_8611"
                            d="M508.284,536.207s-2.647,5.86-.309,9.666l1.393,29.634h3.2l3.1-23.938,5.512,7.087L517.821,575.2l3.911.22,5.432-16.76s-4.173-18.481-5.551-18.926l-.906-4.225Z"
                            data-name="路径 8611"
                            fill="#2f2e41" transform="translate(-177.218 147.459)"/>
                      <path id="路径_8612"
                            d="M505.25,572.195s-2.385,2.737,3.915,3.682,12.914-.472,13.072-2.362S505.25,572.195,505.25,572.195Z"
                            data-name="路径 8612"
                            fill="#cbcbcb" transform="translate(-175.362 116.615)"/>
                      <path id="路径_8613"
                            d="M670.5,346.8a1.829,1.829,0,0,1-2.214,1.721l-2.381,3.434-2.44-.938,3.431-4.8a1.839,1.839,0,0,1,3.6.586Z"
                            data-name="路径 8613"
                            fill="#ffb7b7" transform="translate(-309.033 308.061)"/>
                      <path id="路径_8614"
                            d="M515.569,376.964l-3.367-1.523-4.314.308s-5.2,6.08-3.153,11.907l-1.26,20.316c8.032,2.2,11.683-1.93,17.481-.158l-1.791-22.579Z"
                            data-name="路径 8614"
                            fill="#e97c2c" transform="translate(-174.241 282.315)"/>
                      <path id="路径_8615"
                            d="M565.976,373.519l2.25-1.479s3.126-.472,4.375.74c0,0,4.241.355,5.265,1.414l1.128.254,3.746-4.851,2.292,1.246-3.307,8.977-9.9.493Z"
                            data-name="路径 8615"
                            fill="#e97c2c" transform="translate(-226.898 287.239)"/>
                      <circle id="椭圆_693" cx="5.314" cy="5.314" data-name="椭圆 693" fill="#ffb7b7"
                              r="5.314" transform="translate(330.093 649.27) rotate(-28.663)"/>
                      <path id="路径_8616"
                            d="M514.985,293.771c.949-1.706,2.134-2.811,4.086-2.771s3.64-.037,4.518,1.706a2.867,2.867,0,0,0,.338-1.414,1.62,1.62,0,0,1,.715,1.629,1.183,1.183,0,0,0,.584-.971,1.231,1.231,0,0,1,.491,1.737,3.319,3.319,0,0,1-1.6,1.245c-.62.294-.334,1.851-.739,2.406a6.492,6.492,0,0,0-.6,1.3.085.085,0,0,1-.039.04,1.145,1.145,0,0,0-.635,1.173.191.191,0,0,1-.006.112,6.756,6.756,0,0,1-2.152,2.753,3.568,3.568,0,0,1-2.68.414,4.658,4.658,0,0,1-2.548-1.761,8.951,8.951,0,0,1-1.358-2.834,5.3,5.3,0,0,1-.256-2.757,2.286,2.286,0,0,1,1.884-1.82"
                            data-name="路径 8616"
                            fill="#2f2e41" transform="translate(-182.276 353.458)"/>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {createSocket} from "../server/websocket.js";
import {nextTick, onBeforeUnmount, reactive, ref, watch} from "vue";
import {ChatLineRound, Close, Connection, Plus, Search, User} from "@element-plus/icons-vue";
import Chat from '../components/Chat.vue'
import JsCookie from "js-cookie";
import {LoginUserName} from "../System/SystemContant.js";
import {Check} from "@element-plus/icons-vue/global";
import store from "../store/index.js";
import {
  AckMessage,
  getAdd,
  getFriendList,
  getHistoryMessage,
  messageList,
  sadd,
  searchFriend,
  sendAddMsg,
  unadd
} from "../server/api.js";
import {ElMessage} from "element-plus";
import router from "../router/index.js";

const current_name = JsCookie.get(LoginUserName)
const current_id = JsCookie.get("id")
const current_tick = JsCookie.get("tick")
const current_icon = JsCookie.get("icon")

// createSocket('ws://47.115.225.243:8080/chat?id=' + current_id + '&username=' + current_name)
createSocket('ws://localhost:80/chat?id=' + current_id + '&username=' + current_name)

const SearchValue = ref('')

const OnlineUser = {
  IconUrl: current_icon,
  UserName: current_name,
  Tick: current_tick
}
getMessageList()

function getMessageList() {
  messageList(current_id).then((res) => {
    for (let i = 0; i < res.result.data.length; i++) {
      store.commit('AddChatList', {
        id: res.result.data[i].id,
        list: res.result.data[i]
      })
      store.commit('AddTotal', res.result.data[i].id)
    }
  })
}

const load = ref(true)
setTimeout(() => {
  load.value = false
}, 1000)

const ChatInfo = reactive({
  current_id: parseInt(current_id),
  current_tick: current_tick,
  id: 99,
  title: '',
  icon: '',
  show: false,
})

const chat_load = ref(true)
let msg_id = new Map()

function changeChat(chat) {
  ChatInfo.id = chat.id
  ChatInfo.title = chat.tick
  ChatInfo.icon = current_icon
  ChatInfo.show = true
  getHistoryMessage(current_id, chat.id).then(res => {
    store.state.message[chat.id] = res.result.data
  })
  AckMessage(current_id, chat.id)
  store.state.chat_id = chat.id
  chat.unread = 0
  load.value = true
  setTimeout(() => {
    chat_load.value = false
    load.value = false
  }, 500)
}

const add_open = ref(false)

function open_add_box() {
  add_open.value = true
}

const friend_name = ref('')
let friend_list = reactive({
  list: []
})

function search() {
  searchFriend(friend_name.value).then(res => {
    friend_list.list = []
    friend_list.list.push(res.result.data)
  })
}

const fm = reactive({
  from: 0,
  fromTick: '',
  fromImage: '',
  target: 0
})

function addF(info) {
  fm.from = parseInt(current_id)
  fm.fromTick = current_tick
  fm.fromImage = current_icon
  fm.target = info.id
  sendAddMsg(fm).then(() => {
    ElMessage.success("发送成功")
  })
  setTimeout(() => {
    router.go(0)
  }, 1000)
}

function isAdd(info) {
  sadd(info.target, info.from).then(res => {
    ElMessage.success(res.result.message)
    store.state.addTotal -= 1
  })
  ElMessage.info("两秒后即将刷新")
  setTimeout(() => {
    router.go(0)
  }, 2000)
}

function isUnAdd(info) {
  unadd(info.target, info.from).then(() => {
    store.state.addTotal -= 1
    ElMessage.success("操作成功")
  })
  ElMessage.info("两秒后即将刷新")
  setTimeout(() => {
    router.go(0)
  }, 2000)
}

getAddM()

function getAddM() {
  getAdd(current_id).then(res => {
    store.state.addTotal = parseInt(res.result.message)
    store.state.addF = res.result.data
  })
}

getFriend()

function getFriend() {
  getFriendList(current_id).then(res => {
    store.state.friendList = res.result.data
  })
}

watch(() => ChatInfo.id, () => {
  nextTick(() => {
    if (!msg_id[ChatInfo.id]) {
      chat_load.value = true
    }
    msg_id[ChatInfo.id] = true
  })
})

const getMessage = (res) => {
  let data = res && res.detail.data
  data = JSON.parse(data)
  store.commit('TMessage', data)
  const time = getLocalTime()
  const c_id = parseInt(current_id)
  if (c_id === data.from) {
    store.commit('ChangeList', {
      id: data.target,
      content: data.content,
      time: time
    })
    return
  }
  if (store.state.chat_id !== data.from) {
    store.commit('ChangeListTotal', {
      id: data.from,
      content: data.content,
      time: time
    })
    return
  }
  store.commit('ChangeList', {
    id: data.from,
    content: data.content,
    time: time
  })
}

function getLocalTime(){
  let data = new Date()
  let year = data.getFullYear()
  let month = repair(data.getMonth()+1)
  let day = repair(data.getDate())
  let hour = repair(data.getHours())
  let minute = repair(data.getMinutes())
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute
}
function repair(i){
  if(i>=0&&i<=9){
    return '0'+i
  }
  return i
}

window.addEventListener('onmessageWS', getMessage)
onBeforeUnmount(() => {
  window.removeEventListener('onmessageWS', getMessage)
})
</script>

<style scoped>
.chat-home-box {
  width: 100%;
  height: 100%;
  background-image: url("../assets/chatBG.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-box {
  width: 1450px;
  min-width: 900px;
  height: 900px;
  opacity: 0.83;
  background-color: rgba(195, 225, 209, 0.93);
  border-radius: 5px;
  display: flex;
}

.icon-inside {
  width: 100px;
  min-width: 100px;
  height: 100%;
  border-radius: 5px 0 0 5px;
  text-align: center;
  border-right: 1px solid rgba(126, 124, 124, 0.73);
}

.Icon {
  margin-top: 15px;
}

.user-name {
  padding: 5px;
  font-size: 16px;
  max-width: 100px;
  font-family: 楷体, serif, 微软雅黑;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aside-middle {
  margin-top: 90px;
}

.aside-bottom {
  margin-top: 440px;
}

.main-chat-box {
  width: 100%;
  padding-top: 15px;
  padding-left: 10px;
  display: flex;
}

.left-box {
  width: 600px;
  height: 100%;
  padding-right: 10px;
}

.friend-box {
  margin-top: 10px;
  height: 100%;
}

.add-user, .life, .collect, .system {
  cursor: pointer;
}

.chat-box-main {
  width: 1440px;
  padding-right: 20px;
}


.chat-list-box {
  margin-top: 5px;
  cursor: pointer;
}

.chat-list-box:hover {
  background-color: rgba(178, 239, 217, 0.93);
}

.chat-list-box:active {
  background-color: white;
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: none;
}

/deep/ .el-tabs--border-card > .el-tabs__header {
  background-color: transparent;
  border: none;
}

/deep/ .el-tabs__item {
  padding-top: 10px;
}

</style>